﻿@model TicketsPhone.FrontEnd.Models.ReservarModel
@{
    ViewBag.Title = "Reservar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm()) {
    @Html.ValidationSummary()
    <div id="paso1">
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.IdEntidad)
            @Html.DropDownListFor(modelo => modelo.IdEntidad, new SelectList(Model.Entidades, "IdEntidad", "Nombre", Model.IdEntidad), "-", new { onchange = "CargarSucursales()" })            
        </div>
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.IdSucursal)
            @Html.DropDownListFor(modelo => modelo.IdSucursal, new SelectList(Model.Sucursales, "IdSucursal", "Nombre", Model.IdSucursal), "-")            
        </div>
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.FechaTurno)
            @Html.TextBoxFor(modelo => modelo.FechaTurno, new { type="date" })      
        </div>
        <div>
            <a href="#paso2" onclick="return ValidarPaso1()" data-role="button">Siguiente</a>
        </div>
    </div>
    <div id="paso2" style="display:none">
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.Tramite)
            @Html.DropDownListFor(modelo => modelo.Tramite, new SelectList(Model.Tramites, "IdTramite", "Nombre", Model.Tramite), "-")                               
        </div>
        
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.Hora)
            @Html.DropDownListFor(modelo => modelo.Hora, new SelectList(Model.Horas, Model.Hora), "-")                      
        </div>
        <div data-role="fieldcontain">
            @Html.LabelFor(modelo => modelo.Minuto)
            @Html.DropDownListFor(modelo => modelo.Minuto, new SelectList(Model.Minutos, Model.Minuto), "-")            
        </div>
        <div>
            <input type="submit" value="Register" />
        </div>
    </div>
    
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    function CargarSucursales() {
        AjaxPOST("ObtenerSucursales", { idEntidad: $("#IdEntidad").val() }, CargarSucursales_Callback)
        AjaxPOST("ObtenerTramites", { idEntidad: $("#IdEntidad").val() }, CargarTramites_Callback)
    }

    function CargarTramite() {
        
    }

    function CargarSucursales_Callback(respuesta) {
        $("#IdSucursal").empty();
        $("#IdSucursal").append('<option value="">-</option>');
        $.each(respuesta, function (index, value) {
            $("#IdSucursal").append('<option value="' + value.IdSucursal + '">' + value.Nombre + '</option>');
        });
    }

    function CargarTramites_Callback(respuesta) {
        $("#Tramite").empty();
        $("#Tramite").append('<option value="">-</option>');
        $.each(respuesta, function (index, value) {
            $("#Tramite").append('<option value="' + value.IdTramite + '">' + value.Nombre + '</option>');
        });
    }

    function ValidarPaso1() {
        if ($("#IdSucursal").val() == "" || $("#IdEntidad").val() == "" || $("#FechaTurno").val() == "") {
            alert("Ingrese todos los campos");
            return false;
        }
        else {
            $("#paso1").css("display", "none");
            $("#paso2").css("display", "");
            return true;
        }
    }
</script>
